<template>
	<image
		class="shareMsg"
		:style="{
			top: props.isCustom ? msgTop : '0rpx',
			opacity: msgShow ? 1 : 0,
			zIndex: msgShow ? 999 : -1,
			transition: 'all .2s'
		}"
		src="https://aph.junhecms.com/image/share1.png" />
	<view
		:style="{ top: mouseParams.top + 'px' }"
		class="shareTips flex align-items_center justify-content_center"
		@touchstart.stop="ontouchstart"
		@touchmove.stop="ontouchmove"
		@touchend.stop="ontouchend">
		<image mode="aspectFill" src="@/static/0.png" />
		分享
	</view>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
import { getUpperHeight } from '@/utils/tool';

const mouseParams = reactive({
	top: 500,
	left: 0,
	startX: 0,
	startY: 0,
	moving: false
});

const ontouchend = (e) => {
	mouseParams.moving = false;
};
const ontouchstart = (e) => {
	openMsg();
	mouseParams.startX = e.changedTouches[0].clientX;
	mouseParams.startY = e.changedTouches[0].clientY;
	mouseParams.moving = true;
};
const ontouchmove = (e) => {
	if (mouseParams.moving) {
		let offsetX = e.changedTouches[0].clientX - mouseParams.startX;
		let offsetY = e.changedTouches[0].clientY - mouseParams.startY;
		mouseParams.left += offsetX;
		mouseParams.top += offsetY;
		mouseParams.startX = e.changedTouches[0].clientX;
		mouseParams.startY = e.changedTouches[0].clientY;
	}
};

uni.$on('share', () => {
	msgShow.value = false;
});

const props = defineProps({
	isCustom: {
		type: Boolean,
		default: false
	}
});

const msgTop = getUpperHeight().mgTop + getUpperHeight().linHeight + 12 + 3 + 'px';
const msgShow = ref(false);
const timer = ref(null);
const openMsg = () => {
	console.log('分享');
	if (timer.value) return;
	msgShow.value = true;
	timer.value = setTimeout(() => {
		clearTimeout(timer.value);
		timer.value = null;
		msgShow.value = false;
	}, 2000);
};
</script>

<style scoped lang="scss">
.shareMsg {
	width: 356rpx;
	height: 172rpx;
	position: fixed;
	right: 40rpx;
}

.shareTips {
	width: 160rpx;
	height: 72rpx;
	background: #d93954;
	position: fixed;
	right: 0rpx;
	font-weight: bold;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 72rpx;
	z-index: 999;

	image {
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
